<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <script src="js/index.js"></script>
    <script src="js/axios.js"></script>
    <style>
        .cccc {
            list-style: none;
            text-align: left;
            margin-left: 80px;
        }

    </style>


</head>
<body>

<div id="app">

    <!--element表格-->
    <div style="width: 100%;">
        <template>
            <el-table :data="examparperList" :row-class-name="tableRowClassName" style=" width: auto">

                <el-table-column prop="title" label="卷子标题" :show-overflow-tooltip="true">
                </el-table-column>

                <el-table-column prop="examtime" label="开考时间" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="duration" label="考试时长" :show-overflow-tooltip="true">
                </el-table-column>

                <el-table-column prop="operation" label="操作" align="center" min-width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" round @click="selectexamtotal(scope.row)" size="mini">查看考试成绩
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </template>
    </div>


    <el-dialog title="查看学生做题的记录" :visible.sync="lookstuentparper" width="80%" :before-close="handleClose">

        <div id="parperccc">
            <font size="5">
                考试标题:
            </font>
            <font size="4" color="red">
                {{examtitle}}
            </font>
            <font size="4" size="5">
                考试时长:
            </font>
            <font color="red">
                {{durationccc}} 分钟
            </font>

            <font size="5">
                开考时间:
            </font>
            <font size="4" color="red">
                {{examtimeccc}}
            </font>

            <font size="5">
                考生姓名:
            </font>
            <font size="4" color="red">
                {{studnetname}}
            </font>

            <font size="5">
                学生所得总分:
            </font>
            <font size="4" color="red">
                {{examtotal}}
            </font>


            <br>
            <h2>一.单择题</h2>
            <hr>
            <ol v-for="site in sitesss">
            <span v-if="site.rubrictype==='单选题'">
            <li class="cccc" style="margin-left: 20px">
                <h2>({{site.index}})<font size="4">{{site.rubrictype}}</font> :{{site.content}} {{site.score}}分 <font
                        color="red">正确答案:({{site.answer}})</font>  <font
                        color="red">学生所做答案:({{site.selectanswer}})</font>
                </h2>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">A:{{site.answerA}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">B:{{site.answerB}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">C:{{site.answerC}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">D:{{site.answerD}}</font>
            </li>
            <br><br>
                </span>
            </ol>

            <h2>一.多选题 </h2>
            <hr>
            <ol v-for="site in sitesss">

            <span v-if="site.rubrictype==='多选题'">

            <li class="cccc" style="margin-left: 20px">
                <h2>({{site.index}})<font size="4">{{site.rubrictype}}</font> :{{site.content}} {{site.score}}分 <font
                        color="red">正确答案:({{site.answer}})</font>  <font
                        color="red">学生所做答案:({{site.selectanswer}})</font>
                </h2>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">A:{{site.answerA}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">B:{{site.answerB}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">C:{{site.answerC}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">D:{{site.answerD}}</font>
            </li>
            <br><br>
                </span>
            </ol>

            <h2>一.填空题 </h2>
            <hr>
            <ol v-for="site in sitesss">

            <span v-if="site.rubrictype==='填空题'">

            <li class="cccc" style="margin-left: 20px">
                <h2>({{site.index}})<font size="4">{{site.rubrictype}}</font> :{{site.content}} {{site.score}}分 <font
                        color="red">正确答案:({{site.answer}})</font>  <font
                        color="red">学生所做答案:({{site.selectanswer}})</font>
                </h2>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">A:{{site.answerA}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">B:{{site.answerB}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">C:{{site.answerC}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">D:{{site.answerD}}</font>
            </li>
            <br><br>
                </span>
            </ol>


            <h2>一.判断题 </h2>
            <hr>
            <ol v-for="site in sitesss">

            <span v-if="site.rubrictype==='判断题'">

            <li class="cccc" style="margin-left: 20px">
                <h2>({{site.index}})<font size="4">{{site.rubrictype}}</font> :{{site.content}} {{site.score}}分 <font
                        color="red">正确答案:({{site.answer}})</font>  <font
                        color="red">学生所做答案:({{site.selectanswer}})</font>
                </h2>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">A:{{site.answerA}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">B:{{site.answerB}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">C:{{site.answerC}}</font>
            </li>
            <li class="cccc" v-if="site.seen">
                <font size="4">D:{{site.answerD}}</font>
            </li>
            <br><br>
                </span>
            </ol>
        </div>

    </el-dialog>


</div>

</body>

<script>

    /*自动在请求中添加请求头*/
    axios.defaults.headers.common['Authorization'] = "bearer " + sessionStorage.getItem("access_token");
    /*获取登陆人的userid*/
    var userid = sessionStorage.getItem("userid");

    var courseid = sessionStorage.getItem("courId");


    var mian = new Vue({

        el: '#app',
        mounted: function () {
            this.query();
        },
        data() {
            return {
                examparperList: [],
                sitesss: [],
                studnetname: "",
                lookstuentparper: false,
                durationccc:"",
                examtimeccc:"",
            }
        },

        methods: {

            query() {
                let params = new URLSearchParams();
                params.append("studentid", userid);
                params.append("courseid", courseid);

                axios({
                    method: 'post',
                    url: '/api/exam/examparper/queryexamendparperwherestudentid',
                    data: params,

                }).then(res => {

                    res = res.data;
                    this.examparperList = res;

                })
            },


            /**
             * 点击查看成绩
             *
             * @param val
             */
            selectexamtotal(val) {

                this.lookstuentparper = true;
                let params = new URLSearchParams();


                params.append("studentid", userid);
                params.append("parperid", val.id);
                this.durationccc=val.duration;
                this.examtimeccc=val.examtime;

                axios({
                    method: 'post',
                    url: '/api/exam/examparper/querylogforstudentandparperid',
                    data: params,
                }).then(res => {
                    res = res.data;
                    this.sitesss = res;
                    this.examtotal = res[0].total;
                    this.studnetname = res[0].sname;
                })

            },


        }


    })

</script>

</html>